<!-- 确认订单页面 -->
<template>
  <view class="AffirmOrder">
    <!-- 顶部导航栏 -->
    <view class="nav">
      <view class="nav-item">预约服务</view>
      <view class="nav-item">支付订单</view>
      <view class="nav-item">门店服务</view>
      <view class="line"></view>
    </view>
    <!-- 中间商店信息 -->
    <view class="store-info">
      <view class="logo">
        <uni-icons type="location-filled" size="30" color="#157EFB"></uni-icons>
      </view>
      <view class="content">
        <view class="store-name">{{ merchantInfo.name }}</view>
        <view class="store-address">{{ merchantInfo.address }}</view>
      </view>
    </view>
    <!-- 底部价格信息 -->
    <view class="price-info">
      <view class="phone">{{ phone }}</view>
      <view class="car-info">
        <uni-icons type="shop-filled" size="30" color="#157EFB"></uni-icons>
        <uni-icons type="right" size="30" @click="handleMyCar"></uni-icons>
      </view>
      <view class="service-product">
        <view class="title">
          <text>服务产品</text>
          <view>
            共选择
            <text style="font-size: 36rpx; color: #f44444">
              {{ checkedServiceItemsList.length }}
            </text>
            项服务产品
          </view>
        </view>
        <!-- 遍历服务信息 -->
        <view class="service-content">
          <view
            class="service-item"
            v-for="item in checkedServiceItemsList"
            :key="item.id">
            <text>{{ item.name }}</text>
            <text>￥{{ item.presentPrice }}</text>
          </view>
        </view>
      </view>
      <!-- 优惠券 -->
      <view class="service-coupon">
        <uni-icons type="vip-filled" size="30" color="#157EFB"></uni-icons>
        <view class="coupon-info">
          <text>{{ discountPrice > 0 ? "-" + discountPrice : "" }}</text>
          <uni-icons type="right" size="30" @click="handleMyCoupon"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 合计多少元 -->
    <view class="total-price">
      <text>合计：</text>
      <text>￥{{ totalPrice - discountPrice }}</text>
    </view>
  </view>
  <!-- 公共订单组件 -->
  <CommonOrder @pay="handlePay">提交订单</CommonOrder>
  <!-- 联系客服组件 -->
  <ContactService :phone="phone"></ContactService>
</template>

<script lang="ts" setup>
import CommonOrder from "@/components/CommonOrder.vue";
import ContactService from "@/components/ContactService.vue";
import { ref } from "vue";
import { useMerchantStore } from "@/stores/merchantInfo";
import { useCheckedServiceStore } from "@/stores/CheckedService";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { wxPay } from "@/utils/wxPay";

//创建Pinia实例
const merchantStore = useMerchantStore();
const checkedServiceStore = useCheckedServiceStore();
//TODO 获取当前登录用户的手机号 从本地获取；呼叫公共组件需要
const phone = ref<string>("1380343434");

//获取存储在pinia当中选中的服务
const totalPrice = ref<number>(checkedServiceStore.getTotalPrice());
const checkedServiceItemsList = ref<ServiceItem[]>(
  checkedServiceStore.getCheckedServiceItemsList()
);
//获取服务项中的商户id
const merchantId = ref<number>(checkedServiceItemsList.value[0].mid);
//根据商户id 获取pinia中存储的商户信息
const merchantInfo = ref<any>(
  merchantStore.getMerchantInfoById(merchantId.value)
);
//记录实际折扣金额 提交订单时从全局变量获取
const discountPrice = ref<number>(0);
//记录 返回页面时的优惠券id 没传递或者没有值是-1
const couponId = ref<number>(-1);
//记录 返回页面时的车辆id 没传递或者没有值是-1
const carId = ref<number>(-1);

//函数 点击事件 跳转页面，选择服务的车辆，记录车辆的id
const handleMyCar = () => {
  uni.navigateTo({
    url: "/pages/AffirmOrder/components/MyCar",
  });
};
//函数 点击事件 跳转页面，选择优惠券，记录优惠券的id
const handleMyCoupon = () => {
  uni.navigateTo({
    url: `/pages/AffirmOrder/components/MyCoupon?mid=${merchantId.value}`,
  });
};

//函数 提交订单事件
const handlePay = () => {
  //支付之前 像后端发送请求 生成预支付订单
  console.log("提交订单事件触发了...");
  getPayParams();
};

//函数 像后端发送请求，插入预支付订单数据，然后获取微信官方返回的支付参数
const getPayParams = async () => {
  //1. 封装订单参数 传递优惠券id,车辆id，支付的价格，服务类型id(洗车1  维修2 保养3)， 核销图片(不传递后端有默认值)
  const orderParams = {
    couponId: couponId.value,
    carId: carId.value,
    payPrice: totalPrice.value - discountPrice.value,
    serviceIds: checkedServiceItemsList.value.map((item) => item.id), // 订单的服务id
    serviceTypeID: 1, // 服务类型id 1-洗车 2-维修 3-保养
    serviceImg: "", // 可选参数 有就传递 没就默认值
  };
  //2. 携带参数向后端发送请求 获取预支付响应参数
  wxPay(orderParams);
};

//页面每次从新显示时 从全局变量中获取存储的数据
onShow(() => {
  //从全局变量中获取优惠券id
  couponId.value = Number(uni.getStorageSync("couponId")) || -1;
  //从全局变量中获取车辆id
  carId.value = Number(uni.getStorageSync("carId")) || -1;
  //从全局变量中获取折扣金额
  discountPrice.value = Number(uni.getStorageSync("discountPrice")) || 0;
});

//页面加载时获取折扣金额
onLoad((options: any) => {});
</script>

<style lang="scss" scoped>
/**顶部导航栏静态数据 */
.nav {
  width: 80%;
  height: 120rpx;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  position: relative;
  .nav-item {
    width: 120rpx;
    height: 100%;
    border-radius: 60rpx;
    font-size: 26rpx;
    border: 1rpx solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    background: #f0f0f0;
  }
  .line {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    border-bottom: 1rpx dashed #495056;
    z-index: 3;
  }
}

/**中间商店信息 */
.store-info {
  box-sizing: border-box;
  padding: 20rpx;
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  gap: 25rpx;
  border: 1rpx dashed #495056;
  .content {
    .store-name {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 15rpx;
    }
    .store-address {
      font-size: 30rpx;
      font-weight: 500;
    }
  }
}

/**底部服务价格信息 */
.price-info {
  box-sizing: border-box;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 25rpx;
  margin-top: 30rpx;
  .phone {
    font-size: 30rpx;
    align-self: flex-end;
  }
  .car-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .service-product {
    font-size: 30rpx;
    font-weight: 500;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .service-content .service-item {
      margin-top: 15rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .service-coupon {
    font-size: 30rpx;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .coupon-info {
      display: flex;
      align-items: center;
    }
  }
}

/**合计多少元 */
.total-price {
  font-size: 30rpx;
  font-weight: bold;
  margin: 80rpx auto;
  height: 60rpx;
  width: 300rpx;
  background-color: #f44444;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30rpx;
  color: #f0f0f0;
}
</style>
